<template>
    <div class="home" style="height: 100%">
        <el-button
            type="primary"
            size="mini"
            @click="$router.push({path: '/nsp'})"
            style="position: absolute;top:21px;right: 21px;z-index: 999"
        >
            货源
            <i class="el-icon-arrow-right el-icon-right"></i>
        </el-button>
        <current-year-conta ref="currentYearConta"/>
        <port-info/>
        <world-ranking-conta ref="worldConta"/>
        <current-year-goods ref="currentYearGoods"/>
        <from-vessel-list class="from-vessel-list" :vessel-data-list="reachRouteVOList" label-name="抵港时间" title="抵港船舶"/>
        <to-vessel-list :vessel-data-list="leaveRouteVOList" label-name="离港时间" title="离港船舶"/>
        <ranking-conta ref="cityConta"/>
        <el-dialog
            v-model="dialogVisibleConta"
            width="62.5%"
            :before-close="handleClose"
            class="dialog-port"
        >
            <shen-zhen-port-ratio :current-year-type="currentYearType"/>
        </el-dialog>
        <el-dialog
            v-model="dialogVisibleGoods"
            width="62.5%"
            :before-close="handleClose"
            class="dialog-port"
        >
            <shen-zhen-port-ratio :current-year-type="currentYearType"/>
        </el-dialog>
    </div>
</template>

<script>
import CurrentYearConta from "../../components/portEconomy/BarLineChart";
import CurrentYearGoods from "../../components/portEconomy/BarLineChart";
import WorldRankingConta from "../../components/portEconomy/BarChart";
import WorldRankingGoods from "../../components/portEconomy/BarChart";
import PortInfo from "../../components/portEconomy/PortInfo";
import RankingConta from "../../components/portEconomy/BarLineChart";
import RankingGoods from "../../components/portEconomy/BarLineChart";
import FromVesselList from "../../components/portEconomy/VesselList";
import ToVesselList from "../../components/portEconomy/VesselList";
import http from "../../commons/utils/httpUtil";
import ShenZhenPortRatio from "./ShenZhenPortRatio";
import echartsUtil from "../../commons/utils/echartsUtil";

export default {
    name: "Home",
    components: {
        CurrentYearConta,
        CurrentYearGoods,
        ToVesselList,
        FromVesselList,
        RankingGoods,
        RankingConta,
        WorldRankingGoods,
        WorldRankingConta,
        PortInfo,
        ShenZhenPortRatio
    },
    data() {
        return {
            reachRouteVOList: [],
            leaveRouteVOList: [],
            dialogVisibleConta: false,
            dialogVisibleGoods: false,
            titleImg: require("../../assets/img/common/title_tip.png"),
            currentYearType: ''
        }
    },

    mounted() {
        // 初始化世界港口集装箱吞吐量排名
        this.initWorldRankingContaOption();
        // 初始化国内港口集装箱吞吐量排名
        this.initCityContaOption();
        // 初始化船舶列表数据
        this.initVesselDataList();
        // 初始化当年每月集装箱南山港占比
        this.initCurrentYearContaOption();
        // 初始化当年每月货物南山港占比
        this.initCurrentYearGoodsOption();

        let _this = this;
        let currentYearContaChart = this.$root.$echarts.init(this.$refs.currentYearConta.$refs.myChart);
        currentYearContaChart.getZr().on('click', function (params) {
            _this.currentYearType = 'conta';
            _this.dialogVisibleConta = true;
        })
        let currentYearGoodsChart = this.$root.$echarts.init(this.$refs.currentYearGoods.$refs.myChart);
        currentYearGoodsChart.getZr().on('click', function (params) {
            _this.currentYearType = 'goods';
            _this.dialogVisibleGoods = true;
        })

    },

    methods: {
        /**
         * 初始化世界港口集装箱吞吐量排名
         */
        initWorldRankingContaOption() {
            let _this = this;
            http.get('/large/queryWorldPortContaRanking').then((res) => {
                if (res && res.data && res.data.length > 0) {
                    let dataList = res.data.filter((item, index) => index < 6);

                    let year = new Date().getFullYear();
                    let newYear = --year;
                    let oldYear = --year;
                    let localPort = res.data.filter((item, index) => {
                        item.ranking = index + 1;
                        return item.portCode === 'CNSZN';
                    })[0]
                    _this.worldRankingContaOption = {
                        titleText: '世界港口集装箱排名',
                        subText: newYear + '年深圳港集装箱吞吐量为' + localPort.newConta + '万TEU，世界排名第' + localPort.ranking,
                        legendData: [newYear + '', oldYear + ''],
                        xAxisName: '吞吐量(万TEU)',
                        yAxisData: dataList.map(item => item.portNameCn),
                        seriesData: [
                            {
                                name: newYear,
                                type: 'bar',
                                data: dataList.map(item => item.newConta),
                                itemStyle: echartsUtil.getLinearGradient(1, 0, 0, 0, '#198BFC', '#33EEFF')
                            },
                            {
                                name: oldYear,
                                type: 'bar',
                                data: dataList.map(item => item.oldConta),
                                itemStyle: echartsUtil.getLinearGradient(1, 0, 0, 0, '#C8B238', '#FFE34D')
                            }
                        ]
                    }

                    _this.$refs.worldConta.initSeries(_this.worldRankingContaOption);
                }
            });
        },

        /**
         * 初始化国内港口集装箱吞吐量排名
         */
        initCityContaOption() {
            let _this = this;
            http.get('/large/queryCityPortContaRanking').then((res) => {
                if (res && res.data && res.data.length > 0) {
                    let dataList = res.data.filter((item, index) => index < 5);
                    let year = new Date().getFullYear();
                    let cityContaOption = {
                        titleText: '国内港口集装箱排名',
                        subText: '2020年深圳港集装箱吞吐量为2655.3万TEU，国内排名第3',
                        legendData: [--year + '', --year + '', '同比增速'],
                        xAxisData: dataList.map(item => item.portNameCn),
                        yAxisName: ['吞吐量(万TEU)', '同比增速'],
                        seriesType: ['bar', 'bar', 'line'],
                        yAxisIndex: [0, 0, 1],
                        itemStyle: [
                            echartsUtil.getLinearGradient(0, 0, 0, 1, '#198BFC', '#33EEFF'),
                            echartsUtil.getLinearGradient(0, 0, 0, 1, '#C8B238', '#FFE34D'),
                            {normal: {color: '#f06162'}}
                        ],
                        seriesData: [
                            dataList.map(item => item.newCumContaThr),
                            dataList.map(item => item.oldCumContaThr),
                            dataList.map(item => item.newCumContaGrowth)
                        ]
                    }
                    _this.$refs.cityConta.initSeries(cityContaOption);
                }
            });
        },

        /**
         * 初始化船舶列表数据
         */
        initVesselDataList() {
            let _this = this;
            http.get('/large/queryShipArrivalRecord').then((res) => {
                if (res && res.data) {
                    _this.reachRouteVOList = res.data['reachRouteVOList'].records;
                    _this.leaveRouteVOList = res.data['leaveRouteVOList'].records;
                }
            });
        },

        /**
         * 初始化国内港口货物吞吐量排名
         */
        initCurrentYearContaOption() {
            let _this = this;

            http.get('/large/queryContaRatio').then((res) => {
                if (res && res.data && res.data.length > 0) {
                    let currentYearContaOption = {
                        titleText: '南山港当年月集装箱吞吐量占比',
                        subText: '占比峰值出现在6月',
                        legendData: ['南山港', '深圳港', '南山港占比'],
                        xAxisData: res.data.map(item => item.month + '月'),
                        yAxisName: ['吞吐量(万TEU)', '南山港占比'],
                        seriesType: ['bar', 'bar', 'line'],
                        yAxisIndex: [0, 0, 1],
                        itemStyle: [
                            echartsUtil.getLinearGradient(0, 0, 0, 1, '#198BFC', '#33EEFF'),
                            echartsUtil.getLinearGradient(0, 0, 0, 1, '#C8B238', '#FFE34D'),
                            {normal: {color: '#f06162'}}
                        ],
                        seriesData: [
                            res.data.map(item => item.childContaThr),
                            res.data.map(item => item.parentContaThr),
                            res.data.map(item => item.ratio),
                        ]
                    }

                    let temp = [];
                    let seriesData = currentYearContaOption.seriesData;
                    for (let i = 0; i < seriesData[0].length; i++) {
                        temp.push(((seriesData[0][i] / seriesData[1][i]) * 100).toFixed(2))
                    }
                    seriesData.push(temp);
                    _this.$refs.currentYearConta.initSeries(currentYearContaOption);
                }
            });
        },

        /**
         * 初始化国内港口货物吞吐量排名
         */
        initCurrentYearGoodsOption() {
            let _this = this;

            http.get('/large/queryGoodsRatio').then((res) => {
                if (res && res.data && res.data.length > 0) {
                    let currentYearGoodsOption = {
                        titleText: '南山港当年月货物吞吐量占比',
                        subText: '占比峰值出现在6月',
                        legendData: ['南山港', '深圳港', '南山港占比'],
                        xAxisData: res.data.map(item => item.month + '月'),
                        yAxisName: ['吞吐量(万吨)', '南山港占比'],
                        seriesType: ['bar', 'bar', 'line'],
                        yAxisIndex: [0, 0, 1],
                        itemStyle: [
                            echartsUtil.getLinearGradient(0, 0, 0, 1, '#198BFC', '#33EEFF'),
                            echartsUtil.getLinearGradient(0, 0, 0, 1, '#C8B238', '#FFE34D'),
                            {normal: {color: '#f06162'}}
                        ],
                        seriesData: [
                            res.data.map(item => item.childGoodsThr),
                            res.data.map(item => item.parentGoodsThr),
                            res.data.map(item => item.ratio),
                        ]
                    }
                    _this.$refs.currentYearGoods.initSeries(currentYearGoodsOption);
                }
            });
        },

        handleClose() {
            this.dialogVisibleConta = false
            this.dialogVisibleGoods = false
        }
    },
}
</script>

<style scoped>
.home {
    background-color: rgba(0, 0, 0, 0);
}

.home > div {
    width: 22.5%;
    height: 48%;
    padding: 0.5%
}

.home > div.vessel-list {
    width: 24.5%;
    height: 46%;
    padding: 0.5%;
    overflow: hidden;
    position: relative;
}

.from-vessel-list:after {
    height: 100%;
    width: 3px;
    content: "";
    position: absolute;
    top: 5%;
    right: -0.5%;
    background-color: white;
}

#port-info {
    width: 51%;
    height: 50%;
    padding: 0;
}

.home {
    display: inline-flex;
    flex-wrap: wrap;
    width: 100%;
}
</style>

<style>
div.el-dialog {
    background: linear-gradient(to top, rgba(03, 29, 40, 0.90), rgba(23, 25, 50, 0.9));
    /*margin-top: unset !important;*/
    height: 800px;
    padding: 0 24px;
}

div.el-dialog__header {
    /*height: 46px;*/
    padding: 0;
    color: #ffffff;
    opacity: 0.85;
    line-height: 24px;
    font-size: 18px;
    font-weight: bold;
    /*float: left;*/
    /*display: inline-flex;*/
    /*align-items: center;*/
}

/*div.el-dialog__header > div {*/
/*    display: inline-flex;*/
/*    align-items: center;*/
/*}*/

/*div.el-dialog__body {*/
/*    !*height: calc(800px - 46px);*!*/
/*    padding: 0;*/
/*}*/

</style>